<template>
  <div class="btm">
    <div class="btm_tag" @click="tagEvent">
      <span v-for="(item,index) in tags" :key="index">{{item}}</span>
    </div>
    <div class="btm_box">
      <!-- <textarea class="btm_inp" autofocus ref="inp" :placeholder="placeholder" v-model="bque" @keyup.enter="inputEvent" /></textarea>
      <button class="btm_btn" @click="inputEvent">发送</button>-->

      <!-- <van-cell-group>
      </van-cell-group>-->

      <van-field
        class="btm_inp"
        v-model="bque"
        autosize
        rows="1"
        maxlength="50"
        type="textarea"
        :placeholder="holder"
        @keyup.enter="inputEvent"
        @focus="hideTop"
      />

      <van-button class="btm_btn" autosize type="info" @click="inputEvent">发送</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Btm",
  data() {
    return {
      holder: "有问题，找治安",
      bque: "",
      isclick: false,
      tags: ["我怎样", "你怎样", "今天想跟我说啥"],
    };
  },
  methods: {
    hideTop:function(){
      this.$parent.start=false
    },
    inputEvent: function () {
      //如果都是空格
      let bool = this.bque.replace(/\s/g, "") == "" || !this.bque;
      if (bool) {
        this.$children[0].$refs.input.placeholder = "请先输入问题";
        this.bque = "";
        return;
      }
      this.$emit("addHandle", this.bque);
      this.bque = "";
    },
    //事件代理
    tagEvent: function (e) {
      let that = this;
      if (!that.isclick) {
        console.log(e.target.tagName);

        if (e.target.tagName == "SPAN") {
          that.isclick = true;
          that.$emit("addHandle", e.target.innerText);

          setTimeout(function () {
            that.isclick = false;
          }, 2000);
        }
      }
    },
  },
};
</script>

<style scoped>
.btm {
  width: 7.5rem;
  position: fixed;
  transform: translateX(-50%);
  bottom: 0;
  left: 50%;
}

.btm_tag {
  padding: 0.15rem;
}
.btm_tag span {
  display: inline-block;
  line-height: 0.34rem;
  text-align: center;
  padding: 0.1rem 0.3rem;
  background: #fff;
  border-radius: 0.25rem;
  margin-right: 0.2rem;
  font-size: 0.26rem;
}

.btm_box:after {
  content: "\20";
  clear: both;
  height: 0;
  display: block;
  overflow: hidden;
}

.btm_box {
  /* height: 1.25rem; */
  background: #fff;
  box-sizing: border-box;
  padding: 0.25rem;
}
.btm_inp {
  width: 5.28rem;
  float: left;
  border-radius: 0.38rem;
  background: #f1f0f7;
  outline: none;
  border: none;
  color: #aaa;
  text-indent: 0.3rem;
  font-size: 0.3rem;
  overflow: hidden;
}

.van-cell {
  padding: 0.08rem 0.16rem;
}
/* .van-field__control{line-height: .75rem!important;} */

.btm_btn {
  width: 1.5rem;
  height: 0.75rem;
  line-height: 0.75rem;
  border-radius: 5px;
  font-size: 0.34rem;
  float: right;
  border: none;
  outline: none;
}
</style>